<template>
	<div class="rp-exchange-detail">
		<div class="banner">
			<van-swipe :autoplay="3000" indicator-color="white">
				<van-swipe-item v-for="(item, index) in pics" :key="index">
					<img :src="item" alt="" />
				</van-swipe-item>
			</van-swipe>
		</div>

		<div class="container">
			<p class="title">{{ giftInfo.title }}</p>

			<div class="price">
				<span class="now">{{ giftInfo.endPrice }}</span>
				<span class="old">{{ giftInfo.price }}</span>

				<p class="num">已兑{{ giftInfo.defNum }}件</p>
			</div>

			<div class="has">包含：{{ giftInfo.couponMoney }}元优惠券 + {{ giftInfo.tljMoney }}现金补贴</div>
		</div>

		<div class="rules">
			<rules-text></rules-text>
		</div>

		<div class="footer">
			<button v-if="giftInfo.hasBuy" class="is-exchanged">已兑换</button>
			<button v-else @click="toExchange">{{ giftInfo.goldAmount }}金币兑换</button>
		</div>
	</div>
</template>

<script>
import { Swipe, SwipeItem, Toast } from 'vant';
import _ from 'lodash';
import { mapGetters } from 'vuex';
import RulesText from './components/rules/text';

export default {
	components: {
		'van-swipe': Swipe,
		'van-swipe-item': SwipeItem,
		RulesText
	},

	data() {
		return {};
	},

	computed: {
		...mapGetters(['giftInfo']),

		pics() {
			const { taobaoImage, pic } = this.giftInfo || {};
			return taobaoImage ? taobaoImage.split(',') : [pic];
		}
	},

	created() {
		if (!this.giftInfo) {
			this.$router.back();
		}
	},

	methods: {
		// 礼品兑换
		toExchange: _.debounce(function() {
			const { id, title } = this.giftInfo;

			this.$service.bwbt.bwbtGold
				.conversionMdGood({ id, title })
				.then(res => {
					console.log(res);
					Toast('兑换成功，请打开手机淘宝领取礼品');

					this.giftInfo.hasBuy = 1;

					// 完成任务
					this.$store.dispatch('finishTask', { sceneKey: 'gift' });

					if (res.tkl) {
						BestpayHtml5.System.setClipboardContent({
							data: res.tkl
						});
					}
				})
				.catch(err => {
					Toast(err.message);
				});
		}, 300)
	}
};
</script>

<style lang="scss" scoped>
.rp-exchange-detail {
	.banner {
		/deep/.van-swipe {
			height: 750px;

			img {
				display: block;
				background: #f7f7f7;
				height: 100%;
				width: 100%;
			}
		}
	}

	.container {
		background-color: #fff;
		padding: 20px;

		.title {
			font-size: 32px;
			font-weight: bold;
			margin-bottom: 10px;
		}

		.price {
			display: flex;
			align-items: center;
			position: relative;
			height: 60px;

			.now {
				color: #ff462c;
				font-size: 40px;
				font-weight: 500;

				&::before {
					content: '到手价¥';
					font-size: 24px;
				}
			}

			.old {
				color: #707070;
				font-size: 28px;
				margin-left: 10px;
				text-decoration: line-through;
			}
		}

		.num {
			position: absolute;
			right: 20px;
			font-size: 28px;
			color: #717076;
		}

		.has {
			height: 80px;
			line-height: 80px;
			border-radius: 20px;
			background-color: #fff7ed;
			color: #bc7f34;
			font-size: 28px;
			padding: 0 20px;
			margin: 30px 0 10px 0;
		}
	}

	.rules {
		background-color: #fff;
		padding: 20px;
		padding-bottom: 200px;
		margin-top: 20px;
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 18px 0;
		padding-bottom: calc(env(safe-area-inset-bottom) + 18px);
		box-shadow: -5px 0 10px 2px #ccc;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;

		button {
			height: 88px;
			line-height: 88px;
			border: 0;
			background-color: #ff5d00;
			color: #fff;
			font-size: 32px;
			letter-spacing: 2px;
			width: 90%;
			border-radius: 60px;

			&.is-exchanged {
				background-color: #ccc;
			}
		}
	}
}
</style>
